<template>
  <div class="systemMenus">
    <content-header >权限规则</content-header>
    <div class="container">
      <div class="body">
        <div class="action acea-row row-middle" style="margin-bottom:20px;">
          <a-button type="primary" @click="showaddModal">
            <a-icon type="plus" />
            添加栏目
          </a-button>
        </div>
        <a-table :columns="columns" :pagination="false" rowKey="id" :data-source="menuTree" >
          <div class="is_show" slot="is_show" slot-scope="record" v-if="record.name != 'home'">
            <a-switch :defaultChecked="record.is_show==1?true:false" checked-children="显示" un-checked-children="隐藏" @change="checked => switchChange(checked,record.name)" />
          </div>
          <div class="action acea-row row-middle" slot="action" slot-scope="record">
            <a href="javascript:;" class="acea-row row-middle" v-if="record.level != 2&&record.name != 'home'" @click="showModal(record.id,record.level)">添加子菜单<p></p></a> 
            <a href="javascript:;" class="acea-row row-middle" @click="showEdit(record.id)">编辑</a>
            <a-popconfirm title="确认删除" ok-text="确定" cancel-text="取消" @confirm="delMenu(record.id)" v-if="record.name != 'home'">
              <a href="javascript:;" class="acea-row row-middle" ><p></p>删除</a>
            </a-popconfirm>
          </div>
        </a-table>
      </div>
    </div>
    <modal title="添加子菜单" :show="show" @close="hideModal" width="600px">
      <a-form-model ref="formAdd" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-model-item label="父栏目" prop="pid" required>
          <a-input v-model="form.fa_title" disabled />
        </a-form-model-item>
        <a-form-model-item label="栏目名称" prop="title" required>
          <a-input v-model="form.title" />
        </a-form-model-item>
        <a-form-model-item label="标识" prop="name" required>
          <a-input v-model="form.name" />
        </a-form-model-item>
        <a-form-model-item label="页面路由" prop="path">
          <a-input v-model="form.path" />
        </a-form-model-item>
        <a-form-model-item label="选择图标" prop="icon">
          <iconSelector @change="chooseIcon" :value="form.icon"></iconSelector>
        </a-form-model-item> 
        <a-form-model-item label="是否显示" prop="is_show">
          <a-switch :checked="form.is_show==1?true:false" checked-children="显示" un-checked-children="隐藏" @change="modalSwitchChange" />
        </a-form-model-item> 
        <a-form-model-item label="排序" prop="sort" required>
          <a-input v-model="form.sort" />
        </a-form-model-item>
        <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
          <a-button type="primary" @click="submitAdd">添加</a-button>
        </a-form-model-item> 
      </a-form-model>
    </modal>
    <modal title="编辑" :show="show02" @close="hideModal02" width="600px">
      <a-form-model ref="formEdit" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-model-item label="栏目名称" prop="title" required>
          <a-input v-model="form.title" />
        </a-form-model-item>
        <a-form-model-item label="标识" prop="name" required>
          <a-input v-model="form.name" />
        </a-form-model-item>
        <a-form-model-item label="页面路由" prop="path">
          <a-input v-model="form.path" />
        </a-form-model-item>
        <a-form-model-item label="选择图标" prop="icon">
          <iconSelector @change="chooseIcon" :value="form.icon"></iconSelector>
        </a-form-model-item> 
        <a-form-model-item label="是否显示" prop="is_show">
          <a-switch :checked="form.is_show==1?true:false" checked-children="显示" un-checked-children="隐藏" @change="modalSwitchChange" />
        </a-form-model-item> 
        <a-form-model-item label="排序" prop="sort" required>
          <a-input v-model="form.sort" />
        </a-form-model-item>
        <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
          <a-button type="primary" @click="submitEdit">提交</a-button>
        </a-form-model-item> 
      </a-form-model>
    </modal>
    <modal title="添加栏目" :show="showAdd" @close="hideAddModal" width="600px">
      <a-form-model ref="addForm" :model="addForm" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-model-item label="栏目名称" prop="title" required>
          <a-input v-model="addForm.title" />
        </a-form-model-item>
        <a-form-model-item label="标识" prop="name" required>
          <a-input v-model="addForm.name" />
        </a-form-model-item>
        <a-form-model-item label="页面路由" prop="path">
          <a-input v-model="addForm.path" />
        </a-form-model-item>
        <a-form-model-item label="选择图标" prop="icon">
          <iconSelector @change="e=>addForm.icon = e" :value="addForm.icon"></iconSelector>
        </a-form-model-item> 
        <a-form-model-item label="是否显示" prop="is_show" required>
          <a-switch :checked="addForm.is_show==1?true:false" checked-children="显示" un-checked-children="隐藏" @change="modalSwitchChange" />
        </a-form-model-item> 
        <a-form-model-item label="排序" prop="sort" required>
          <a-input v-model="addForm.sort" />
        </a-form-model-item>
        <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
          <a-button type="primary" @click="submitAddTop">提交</a-button>
        </a-form-model-item> 
      </a-form-model>
    </modal>
  </div>
</template>

<script>
import request from 'api/request'
import contentHeader from 'components/common/content-header'
import Modal from 'components/common/modal'
import iconSelector from 'components/iconSelector'

const columns = [
  { title: 'ID', dataIndex: 'id', key: 'id' },
  { title: '名称', dataIndex: 'title', key: 'title'},
  { title: '标识', dataIndex: 'name', key: 'name'},
  { title: '页面路由', dataIndex: 'path', key: 'path'},
  { title: '规则状态', key: 'is_show' ,scopedSlots: { customRender: 'is_show' }},
  { title: '排序', dataIndex: 'sort', key: 'sort'},
  { title: '操作', key: 'action',width:'200' ,scopedSlots: { customRender: 'action' },fixed:'right'},
]


export default {
  name:'systemMenus',
  components:{
    contentHeader,
    Modal,
    iconSelector
  },
  computed: {
    menuTree(){
      return this.$store.state.menu.menuTree
    }
  },
  data(){
    return{
      columns,
      show:false,
      show02:false,
      showAdd:false,
      addForm:{
        title:'',
        name:'',
        path:'',
        icon:'',
        is_show:1,
        sort:0,
        level:0
      },
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      form:{
        pid:'',
        fa_title:'',
        title:'',
        name:'',
        path:'',
        icon:'',
        is_show:1,
        sort:0,
        level:0
      },
    }
  },
  methods: {
    switchChange:function(checked,name){
      let params = {}
      params.is_show = checked?1:0
      params.name = name
      params.method = "changeShow"
      request.post('/system/menus/edit',params).then(e=>{
        if(e.status == 200){
          this.$store.commit('menu/changeShow',params)
        }
      })
    },
    showModal:function(pid,level){
      let menuList = this.$store.state.menu.menuList
      this.show = true
      this.form.pid = pid
      this.form.fa_title = menuList.find(e=>e.id == pid).title
      this.form.level = level
    },
    hideModal:function (){
      this.show = false
      this.$refs.formAdd.resetFields()
    },
    hideModal02(){
      this.show02 = false
      this.$refs.formEdit.resetFields()
      this.form = {
        id:'',
        pid:'',
        fa_title:'',
        title:'',
        name:'',
        path:'',
        icon:'',
        is_show:1,
        sort:"",
        level:0
      }
    },
    showEdit:function(id){
      this.show02 = true
      let menuList = this.$store.state.menu.menuList
      let list = menuList.find(e=>e.id == id)
      this.form = list
    },
    submitAdd:function(){
      const that = this;
      this.$refs.formAdd.validate(valid => {
        if (valid) {
          let form = this.form
          request.post("/system/menus/add",form).then(e=>{
            if(e.status == 200){
              that.hideModal()
              that.$message.success(e.msg)
              that.$store.dispatch('menu/getMenus')
            }else{
              that.$message.error(e.msg)
            }
          })
        } else {
          return false;
        }
      })
    },
    submitEdit:function(){
      const that = this;
      this.$refs.formEdit.validate(valid => {
        if (valid) {
          let form = this.form
          form.method = "edit"
          request.post("/system/menus/edit",form).then(e=>{
            if(e.status == 200){
              that.hideModal02()
              that.$message.success(e.msg)
              that.$store.dispatch('menu/getMenus')
            }else{
              that.$message.error(e.msg)
            }
          })
        } else {
          return false;
        }
      })
    },
    showaddModal(){
      this.showAdd = true
    },
    hideAddModal(){
      this.showAdd = false
      this.$refs.addForm.resetFields()
    },
    submitAddTop(){
      const that = this;
      this.$refs.addForm.validate(valid => {
        if(valid){
          let form = this.addForm
          form.pid = 0
          request.post("/system/menus/add",form).then(e=>{
            if(e.status == 200){
              that.hideAddModal()
              that.$message.success(e.msg)
              that.$store.dispatch('menu/getMenus')
            }else{
              that.$message.error(e.msg)
            }
          })
        }
      })
    },
    delMenu:function(id){
      const that = this
      request.post("/system/menus/del",{id}).then(e=>{
        if(e.status == 200){
          that.$message.success(e.msg)
          that.$store.dispatch('menu/getMenus')
        }else{
          that.$message.error(e.msg)
        }
      })
    },
    chooseIcon:function(e){
      this.form.icon = e
    },
    modalSwitchChange:function(checked){
      this.form.is_show = checked?1:0
    }
  },
}
</script>

<style scoped>
  .systemMenus .container{
    width: calc(100% - 32px);
    margin: 16px auto;
    background-color: #ffffff;
  }
  .systemMenus .container .body{
    padding: 16px;
  }
  .systemMenus .container .body .action p{
    height: 14px;
    width: 1px;
    margin: 0 10px;
    background-color: #515a6e;
  }
</style>